import React from 'react';
import { useModel } from '@umijs/max';
import { AutoComplete, message } from 'antd/es';
import { addTeam } from '@/services/teamService';
import {
  PageContainer,
  ProForm,
  ProFormDigit,
  ProFormItem,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { TeamType } from '@/models/team';

/**
 *队伍创建页面
 */
const TeamAddPage: React.FC<unknown> = () => {
  const { initialState } = useModel('@@initialState');
  const loginUser = initialState?.loginUser;
  const tagMap = initialState?.tagMap || {};

  /**
   * 根据分类获取标签选项数组
   */
  const getOptions = (category: string) => {
    // 判断是否存在于 tagMap列表中
    if (!category || !tagMap[category]) {
      return [];
    }
    return tagMap[category].map((tag) => {
      return {
        value: tag.tagName,
        label: tag.tagName,
      };
    });
  };

  /**
   * 创建
   * @param fields
   */
  const doAdd = async (fields: TeamType.TeamAddRequest) => {
    const hide = message.loading('正在提交');
    try {
      await addTeam(fields);
      message.success('申请创建成功');
    } catch (e: any) {
      message.error('创建失败，请重试！', e.message);
    } finally {
      hide();
    }
  };

  /**
   * AutoComplete 过滤函数
   * @param inputValue
   * @param option
   */
  const filterOption = (inputValue: string, option: any) =>
    option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1;

  return (
    <PageContainer title="申请创建队伍">
      <ProForm<TeamType.TeamAddRequest>
        onFinish={async (values) => {
          values.teamTechnologyType = JSON.stringify(values.teamTechnologyType);
          values.userId = loginUser?.id || 0;
          doAdd(values);
        }}
        requiredMark={false}
        labelAlign="left"
        labelCol={{
          xs: 24,
          sm: 4,
          md: 3,
          xl: 2,
        }}
        wrapperCol={{
          xs: 24,
          sm: 20,
          md: 16,
          xl: 14,
        }}
        submitter={{
          submitButtonProps: {
            style: {
              minWidth: 160,
            },
          },
          render: (props, dom) => [...dom.reverse()],
        }}
      >
        <ProFormText
          name="teamName"
          label="项目名称"
          placeholder="请输入项目名称"
          required
        />
        <ProFormText
          name="teamAvatarUrl"
          label="项目图片"
          placeholder="请输入项目图片远程地址"
          required
        />
        <ProFormDigit
          min={3}
          max={10}
          name="maxNum"
          label="项目人数"
          required
        />
        <ProFormItem label="项目" name="teamType" required>
          <AutoComplete
            placeholder="请输入"
            options={getOptions('project')}
            filterOption={filterOption}
          />
        </ProFormItem>
        <ProFormSelect
          name="teamTechnologyType"
          label="技术"
          request={async () => getOptions('technology')}
          fieldProps={{
            mode: 'multiple',
          }}
          placeholder="技术类型"
          rules={[
            {
              required: true,
              message: 'Please select your favorite colors!',
              type: 'array',
            },
          ]}
        />
        <ProFormTextArea
          name="teamDescription"
          label="项目介绍"
          required
          // fieldProps={{
          //
          //     autoSize: { minRows: 6 },
          // }}
        />
      </ProForm>
    </PageContainer>
  );
};

export default TeamAddPage;
